<template>
	<view class="content">
		<u-navbar leftIconColor="#fff" titleStyle="color:#fff" title="支付绑定" bgColor="transparent" :autoBack="true"
			:placeholder="false">
		</u-navbar>
		<view style="height: 6vh;"></view>
		<view class="my-content">
			<view class="head">
				<view :class="item.show == true?'activity':'stillness'" class="head-item"
					v-for="(item,index) in headList" :key="index" @click="headTab(index,item)">
					<image :src="item.show == true?item.active_img:item.img" mode="heightFix"></image>
					<view>
						{{item.text}}
					</view>
				</view>
			</view>
			<!-- <view class="payment" v-if="this.status == 3">
				<view class="content-title">
					持卡人姓名
				</view>
				<view class="entry">
					<u--input maxlength="16" border="none" color="#fff" v-model="form.name"
						placeholder="请输入持卡人姓名"></u--input>
				</view>
				<view class="content-title">
					开户行
				</view>
				<view class="entry">
					<u--input maxlength="16" border="none" color="#fff" v-model="form.account_num"
						placeholder="请输入开户行"></u--input>
				</view>
				<view class="content-title">
					银行卡号
				</view>
				<view class="entry">
					<u--input maxlength="16" border="none" color="#fff" v-model="form.bank_num"
						placeholder="请输入银行卡号"></u--input>
				</view>
				<view class="content-title">
					安全密码
				</view>
				<view class="entry">
					<u--input maxlength="16" border="none" color="#fff" v-model="form.receive_qrcode"
						placeholder="请输入安全密码"></u--input>
				</view>
			</view> -->
			<view class="payment" v-if="this.status == 2">
				<view class="entry">
					<view class="content-title">
						微信名称
					</view>
					<u--input border="none" :disabled="vxshow" disabledColor="rgba(0,0,0,0.0)" color="#fff"
						v-model="form.name" placeholder="请输入微信名称"></u--input>
				</view>
				<view class="entry">
					<view class="content-title">
						微信号
					</view>
					<u--input border="none" :disabled="vxshow" disabledColor="rgba(0,0,0,0.0)" color="#fff"
						v-model="form.account_num" placeholder="请输入微信号"></u--input>
				</view>
				<view class="code-box">
					<view class="item-title">
						上传微信收款码
					</view>
					<view class="code" v-if="vxshow == false" @click="upload">
						<image :src="'https://web.sunsk.top'+form.receive_qrcode" style="width:100%;height:240rpx"
							v-if="form.receive_qrcode" />
						<u-icon v-else class="icon" name="plus" color="#ffffff" size="28"></u-icon>
					</view>
					<view class="code" v-else>
						<image :src="'https://web.sunsk.top'+form.receive_qrcode" style="width:100%;height:240rpx"
							v-if="form.receive_qrcode" />
						<u-icon v-else class="icon" name="plus" color="#ffffff" size="28"></u-icon>
					</view>
				</view>
			</view>
			<view class="payment" v-if="this.status == 1">
				<view class="entry">
					<view class="content-title">
						支付宝昵称
					</view>
					<u--input border="none" :disabled="zfbshow" disabledColor="rgba(0,0,0,0.0)" color="#fff"
						v-model="form.name" placeholder="请输入支付宝昵称"></u--input>
				</view>
				<view class="entry">
					<view class="content-title">
						支付宝账号
					</view>
					<u--input border="none" :disabled="zfbshow" disabledColor="rgba(0,0,0,0.0)" color="#fff"
						v-model="form.account_num" placeholder="请输入支付宝账号"></u--input>
				</view>
				<view class="code-box">
					<view class="item-title">
						上传支付宝收款码
					</view>
					<view class="code" @click="upload" v-if="zfbshow == false">
						<image :src="'https://web.sunsk.top'+form.receive_qrcode" style="width:100%;height:240rpx"
							v-if="form.receive_qrcode" />
						<u-icon v-else class="icon" name="plus" color="#ffffff" size="28"></u-icon>
					</view>
					<view class="code" @click="upload" v-else>
						<image :src="'https://web.sunsk.top'+form.receive_qrcode" style="width:100%;height:240rpx"
							v-if="form.receive_qrcode" />
						<u-icon v-else class="icon" name="plus" color="#ffffff" size="28"></u-icon>
					</view>
				</view>
			</view>
			<view class="payment" v-if="this.status == 4">
				<view class="entry">
					<view class="content-title">
						链名称
					</view>
					<u--input maxlength="5" border="none" color="#fff" v-model="lname" disabled
						disabledColor="rgba(0,0,0,0.0)"></u--input>
				</view>
				<view class="entry">
					<view class="content-title">
						充币地址
					</view>
					<u--input maxlength="50" border="none" color="#fff" :disabled="usdtshow"
						disabledColor="rgba(0,0,0,0.0)" v-model="form.name" placeholder="请输入充币地址"></u--input>
				</view>
				<view class="entry" v-if="usdtshow == false">
					<view class="content-title" v-if="usdtshow == false">
						安全密码
					</view>
					<u--input maxlength="6" border="none" color="#fff" v-model="form.bank_num"
						placeholder="请输入安全密码"></u--input>
				</view>

				<view class="code-box">
					<view class="item-title">
						上传链二维码
					</view>
					<view class="code" @click="upload" v-if="usdtshow == false">
						<image :src="'https://web.sunsk.top'+form.receive_qrcode" style="width:100%;height:240rpx"
							v-if="form.receive_qrcode" />
						<u-icon v-else class="icon" name="plus" color="#ffffff" size="28"></u-icon>
					</view>
					<view class="code" v-else>
						<image :src="'https://web.sunsk.top'+form.receive_qrcode" style="width:100%;height:240rpx"
							v-if="form.receive_qrcode" />
						<u-icon v-else class="icon" name="plus" color="#ffffff" size="28"></u-icon>
					</view>
				</view>
			</view>
			<view class="btn" v-if="status == 1">
				<u-button class="btn-color" shape="circle" color="linear-gradient( 90deg, #C8F673 0%, #98F083 100%)"
					@click="save" v-if="zfbshow == false" type="primary" text="确认并保存"></u-button>
				<u-button shape="circle" color="#a7a7a7" v-else type="primary" text="已上传"></u-button>
			</view>
			<view class="btn" v-if="status == 2">
				<u-button class="btn-color" shape="circle" color="linear-gradient( 90deg, #C8F673 0%, #98F083 100%)"
					@click="save" v-if="vxshow == false" type="primary" text="确认并保存"></u-button>
				<u-button color="#a7a7a7" v-else type="primary" text="已上传" shape="circle"></u-button>
			</view>
			<view class="btn" v-if="status == 4">
				<u-button class="btn-color" shape="circle" color="linear-gradient( 90deg, #C8F673 0%, #98F083 100%)"
					@click="save" v-if="usdtshow == false" type="primary" text="确认并保存"></u-button>
				<u-button shape="circle" color="#a7a7a7" v-else type="primary" text="已上传"></u-button>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: "",
					account_num: "",
					bank_num: "",
					receive_qrcode: ""
				},
				lname: 'TRC20',
				bank_realName: '',
				bankName: '',
				bankNum: '',
				bankPsw: '',
				chatName: '',
				chatNum: '',
				alipayName: '',
				alipayNum: '',
				u_Name: '',
				u_psw: '',
				status: 2,
				zfbshow: false,
				vxshow: false,
				usdtshow: false,
				headList: [
					// {
					// 	text: '银行卡',
					// 	status: 3,
					// 	show: true,
					// 	img: '/static/community/bank.png'
					// },
					{
						text: '微信',
						status: 2,
						show: true,
						img: '/static/my/chat0.png',
						active_img: '/static/my/chat1.png'
					},
					{
						text: '支付宝',
						status: 1,
						show: false,
						img: '/static/my/alipay0.png',
						active_img: '/static/my/alipay1.png'
					},
					{
						text: 'USDT',
						status: 4,
						show: false,
						img: '/static/my/usdt0.png',
						active_img: '/static/my/usdt1.png'
					}
				],
			}
		},
		onLoad() {
			this.postinfo()
		},
		methods: {
			postinfo() {
				let params = {
					type: this.status
				}
				this.$Request({
					method: 'POST',
					url: '/api/personal/paymentInfo',
					data: params
				}).then(res => {
					if (res.code == 1) {
						console.log(this.status)
						if (this.status == 3) {
							this.form.name = res.data.name
							this.form.account_num = res.data.account_num
							this.form.bank_num = res.data.bank_num
						}
						if (this.status == 2) {
							this.form.name = res.data.name
							this.form.account_num = res.data.account_num
							this.form.receive_qrcode = res.data.receive_qrcode
							if (res.data.name != undefined) {
								console.log(this.form)
								this.vxshow = true
							}
						}
						if (this.status == 1) {
							this.form.name = res.data.name
							this.form.account_num = res.data.account_num
							this.form.receive_qrcode = res.data.receive_qrcode
							if (res.data.name != undefined) {
								console.log(this.form)
								this.zfbshow = true
							}

						}
						if (this.status == 4) {
							this.form.name = res.data.adress
							this.form.receive_qrcode = res.data.receive_qrcode
							if (res.data.adress != undefined) {
								console.log(this.form)
								this.usdtshow = true
							}
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})

			},
			upload() {
				let _self = this;
				//第一步:打开手机相册或者文件管理器选择文件
				uni.chooseImage({
					count: 1, //允许上传一张图片
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						//获得选择好的文件,就算只有一个文件也是数组
						const tempFilePaths = res.tempFilePaths;
						uni.showLoading()
						uni.uploadFile({
							url: '/api/upload/upload', //后端接口url
							filePath: tempFilePaths[0],
							header: {
								'Access-Control-Allow-Origin': '*',
							},
							data: {
								token: uni.getStorageSync("token") || ''
							},
							name: 'file', //和后端接口需要的参数名一致
							success: (res) => {
								_self.form.receive_qrcode = JSON.parse(res.data).url
								uni.showToast({
									title: "成功",
									icon: "none"
								})
							},
							complete: (ok) => {
								uni.hideLoading()
							}
						})
					}
				})
			},
			save() {
				let params = {

				}
				if (this.status == 3) {
					if (this.form.name == '') {
						uni.showToast({
							title: '请输入持卡人姓名',
							icon: 'none'
						})
						return
					}
					if (this.form.account_num == '') {
						uni.showToast({
							title: '请输入持开户行',
							icon: 'none'
						})
						return
					}
					if (this.form.bank_num == '') {
						uni.showToast({
							title: '请输入持银行卡号',
							icon: 'none'
						})
						return
					}
					if (this.form.receive_qrcode == '') {
						uni.showToast({
							title: '请输入持安全密码',
							icon: 'none'
						})
						return
					}
					params.name = this.form.name
					params.account_num = this.form.account_num
					params.bank_num = this.form.bank_num
					params.password = this.form.receive_qrcode
				}
				if (this.status == 2) {
					if (this.form.name == '') {
						uni.showToast({
							title: '请输入微信名称',
							icon: 'none'
						})
						return
					}
					if (this.form.account_num == '') {
						uni.showToast({
							title: '请输入微信号',
							icon: 'none'
						})
						return
					}
					if (this.form.receive_qrcode == '') {
						uni.showToast({
							title: '请上传微信收款码',
							icon: 'none'
						})
						return
					}
					params.name = this.form.name
					params.account_num = this.form.account_num
					params.receive_qrcode = this.form.receive_qrcode
				}
				if (this.status == 1) {
					if (this.form.name == '') {
						uni.showToast({
							title: '请输入支付宝昵称',
							icon: 'none'
						})
						return
					}
					if (this.form.account_num == '') {
						uni.showToast({
							title: '请输入支付宝账号',
							icon: 'none'
						})
						return
					}
					if (this.form.receive_qrcode == '') {
						uni.showToast({
							title: '请上传支付宝收款码',
							icon: 'none'
						})
						return
					}
					params.name = this.form.name
					params.account_num = this.form.account_num
					params.receive_qrcode = this.form.receive_qrcode
				}
				if (this.status == 4) {
					if (this.form.name == '') {
						uni.showToast({
							title: '请输入充币地址',
							icon: 'none'
						})
						return
					}
					if (this.form.bank_num == '') {
						uni.showToast({
							title: '请输入安全密码',
							icon: 'none'
						})
						return
					}
					if (this.form.receive_qrcode == '') {
						uni.showToast({
							title: '请上传usdt二维码',
							icon: 'none'
						})
						return
					}
					params.adress = this.form.name
					params.receive_qrcode = this.form.receive_qrcode
					params.password = this.form.bank_num
				}
				uni.showLoading()
				this.$Request({
					method: 'POST',
					url: '/api/personal/paymentMethod',
					data: {
						...params,
						type: this.status
					}
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						this.postinfo()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			headTab(index, item) {
				this.headList.map((item) => {
					item.show = false
				})
				this.headList[index].show = true
				this.status = item.status
				this.form = {
					name: "",
					account_num: "",
					bank_num: "",
					receive_qrcode: ""
				}
				this.postinfo()
			},
		}
	}
</script>

<style>
	page {
		background-color: #17191A;
	}

	.btn-color {
		color: #17191A !important;
	}
</style>
<style lang="scss" scoped>
	.content {
		width: 100%;

		.my-content {
			padding: 30rpx;
			color: #fff;

			.head {
				display: flex;
				justify-content: space-between;

				padding: 30rpx 0;

				.head-item {
					width: 210rpx;
					font-size: 24rpx;
					padding: 20rpx 0;
					border-radius: 40rpx;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 26.77rpx;
						height: 25.5rpx;
						margin-right: 10rpx;
					}
				}

				.activity {
					background: linear-gradient(90deg, #C8F673 0%, #98F083 100%);
					color: #17191A;
				}

				.stillness {
					background: linear-gradient(134deg, rgba(255, 227, 211, 0.06) 0%, rgba(67, 130, 84, 0.26) 100%);
					border: 4rpx solid rgba(108, 233, 137, 0.12);
				}
			}

			.payment {
				background: linear-gradient(134deg, rgba(255, 227, 211, 0.06) 0%, rgba(67, 130, 84, 0.26) 100%);
				border: 4rpx solid rgba(108, 233, 137, 0.12);
				padding: 30rpx;
				border-radius: 30rpx;
				margin-bottom: 30rpx;

				.entry {
					padding: 30rpx;
					background-color: rgba(238, 238, 238, 0.2);
					border-radius: 40rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 30rpx;

					.content-title {
						width: 180rpx;
						font-size: 28rpx;
						font-weight: 600;
					}
				}

				.code-box {
					.item-title {
						color: #fff;
						font-size: 28rpx;
						font-weight: 600;
						padding: 30rpx 0;
					}

					.code {
						width: 240rpx;
						height: 240rpx;
						background-color: #17191A;
						margin: 0 auto;
						position: relative;

						image {
							width: 240rpx;
							height: 240rpx;
						}

						.icon {
							width: 28px;
							position: absolute;
							top: 38%;
							left: 0;
							right: 0;
							margin: 0 auto;
						}
					}
				}

				.payment-item:first-child {
					margin: 0;
				}

				.payment-item:last-child {
					border: none;
					padding: 0;
				}
			}

			.btn {
				margin-top: 40rpx;
			}
		}
	}
</style>